<template>
  <div id="limit">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
        <el-radio-group v-model="selectRoll" @change="selectARoll">
          <el-radio label="主管" border>主管</el-radio>
          <el-radio label="经理" border>经理</el-radio>
          <el-radio label="会计" border>会计</el-radio>
          <el-radio label="服务员" border>服务员</el-radio>
          <el-radio label="领班" border>领班</el-radio>
          </el-radio-group>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <h4>当前选中身份权限信息</h4>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <el-table :data="tableData" style="width: 100%"  :span-method="combineCol">
            <el-table-column  label="身份" align="center">
            	<template slot-scope="scope">
                <h3>{{scope.row.roll}}</h3>
              </template>
            </el-table-column>
            <el-table-column prop="page" label="可查看的页面" align="center">
            </el-table-column>

            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.state" disabled active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>





<script>
	/*
	*进入权限页面可以查看自己身份可以进入的页面，
	*主管和经理可以进入权限管理
	*默认不能更改当前页面的权限
	*经理可以更改所有人的
	*主管可以更改除前台身份的权限
	*/
export default {
  page: "Limit",
  data() {
    return {
      selectRoll: sessionStorage.getItem('jobName')||undefined,//默认显示的神信息
      tableData: [{
      	    roll:sessionStorage.getItem('jobName')||undefined,
            page: '前台页面',
            state: false
          }, {
            page: '菜品管理',
            state: false
          }, {
            page: '运营管理',
            state: false
          }, {
            page: '库存管理',
            state: false
          },{
            page: '基础信息',
            state: false
          },{
            page: '系统设置',
            state: false
          },{
            page: '财务分析',
            state: false
          }]
    }
  },
  methods:{
  	combineCol({ row, column, rowIndex, columnIndex }) {//合并列
        if (columnIndex === 0) {
          if (rowIndex === 0) {
            return [7, 1];
          } else {
            return [0, 0];
          }
        }
      },
    selectARoll(value){//切换的身份,显示当前身份的可查看页面
    	this.tableData[0].roll=value
    	// console.log(this.$router.options.routes[2].children)
    	this.rollPageList(value)
    },
    rollPageList(value){//显示可查看页面的方法(参数：选中的身份)
    	//根据传入的身份去meta里找出包含该身份的页面，改变表中页面显示的状态
    	if (value=='经理') {
    		this.tableData.forEach((item,index)=>{
    			item.state=true
    		})
    	}
    	if (value=='主管') {
    		this.tableData.forEach((item,index)=>{
    			if(index<5) item.state=true
    			else item.state=false
    		})
    	}
    	if (value=='会计') {
    		this.tableData.forEach((item,index)=>{
    			if(index==6) item.state=true
    			else item.state=false
    		})
    	}
    	if (value=='服务员'||value=='领班') {
    		this.tableData.forEach((item,index)=>{
    			if(index==0) item.state=true
    			else item.state=false
    		})
    	}
    }
  },
  computed:{

  },
  created(){
  	this.rollPageList(this.selectRoll)
  }
}


</script>


<style lang="less" scoped>
#limit{
	text-align: center;
	h4{
		color: #BBD1C8;
		padding: 5px 0;
	}
}

</style>
